<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>index</title>
    <script src="/js/index/index_head.js"></script>
    <style>
        /* CSS 样式 */
        *{
            margin: 0;
            padding: 0;
        }
        body {
            position: relative;
            font-family: Arial, sans-serif;
            box-sizing: border-box;
        }
        .clearfix{
            clear:both;
        }

        .com_img{
            background-size: 154px 880px;
        }
        ._com_img{
            background-size:auto;
        }
        .nav_img{
            background-size: 643px 70px;
        }
        ._nav_img{
            background-size: auto;
        }
        .nav_detail_img{
            background-size: auto;
        }
        ._nav_detail_img{
            background-size: 575px 41px;
        }
        .detail_img{
            background-size: auto;
        }
        /*._detail_img{*/
        /*    background-image: url('http://127.0.0.1:8084/Index/img?name=_detail_collection');*/
        /*    background-size: auto;*/
        /*}*/
        .size10{
            width: 10px;
            height:10px;
        }
        .size13{
            width: 13px;
            height: 13px;
        }
        .size16{
            width: 16px;
            height:16px;
        }
        .size18{
            width: 18px;
            height: 18px;
        }
        .size24{
            width: 24px;
            height:24px;
        }
        .size50{
            width: 50px;
            height: 50px;
        }
        i{
            display: inline-block;
        }

        .background{
            position: absolute;
            margin-top: 41px;
            width: 100%;
            height:700px;
            background-repeat: no-repeat;
            background-position: center,top;
            background-size: cover;
            z-index: -1;
        }
        .background_repeat{
            position: absolute;
            width: 100%;
            height: 100%;
            background-repeat:repeat;
            z-index: -2;
        }

        a {
            display: inline-block;
            text-decoration: none;
            color:black;
        }

        ol, ul {
            list-style: none;
        }

        header {
            height: 41px;
            visibility: hidden;
        }

        header .nav_bottom_fix {
            position: fixed;
            visibility:visible;
            z-index: 500;
            width: 100%;
            min-width: 760px;
            min-height: 41px;
            box-shadow: 0 1px 0 rgb(0 0 0 / 20%);
        }

        .nav_bottom_fix .nav_top_fix {
            display: flex;
            min-width: 760px;
            max-height: 41px;
            justify-content: space-between;
            z-index: 550;
            background-color: #a6926c;
        }
        .nav_top_fix .header_left{
            display:flex;
            justify-content:space-evenly;
        }
        .header_left .logo {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 90px;
            height: 41px;
            margin-left: 295px;
        }
        .logo img{
            height: 41px;
            width: 90px;
        }
        .header_left .header_left_content {
            display: flex;
            margin-left: 10px;
        }
        .header_left_content .header_list {
            min-width: 77px;
            height: 41px;
            line-height: 41px;
            font-size: 14px;
            text-align: center;
            position: relative;
        }

        .header_list a{
            color:white;
        }
        .header_list:hover{
            background-color:#ffffff;
            /*background-color: #bfab86;*/
        }
        .header_left_content>li:first-child{
            background-color: rgb(191, 171, 134);
        }
        .header_list:hover>a{
            color:#a6926c;
        }

        .header_list .header_list_home_content{
            position: absolute;
            width: 520px;
            height:221px;
            display: none;
            background:#FEFDFD;
            border:1px solid rgba(0,0,0,0.16);
            border-top: 0;
            line-height: 16px;
        }
        .header_list:hover .header_list_home_content{
            display: block;
            transition:opacity 0.5s ease-in-out;
            opacity: 1;
        }
        .header_list_home_content .content{
            display: inline-block;
        }
        .header_list_home_content .content a{
            display: block;
        }
        .header_list_home_content .content .app_name{
            font-size: 12px;
            margin-top: 8px;
            height: 16px;
            color:#000000;
            text-align: center;
        }
        .header_list_home_content .content .app_name:hover{
            text-decoration: underline;
        }
        .header_list_home_content .header_list_home_content_left{
            float: left;
            width: 101px;
        }
        .header_list_home_content_left .content{
            margin-top: 20px;
        }
        .header_list_home_content_left .content .app_icon{
            width: 48px;
            height: 48px;
            border: #e2e2e2 1px solid;
            border-radius: 3px;
        }
        #index{
            margin: 12px auto;
            background-position: -520px 0;
        }
        .header_list_home_content_left .content .app_name{
            width: 50px;
        }
        .header_list_home_content .header_list_home_content_right{
            float: left;
            height: 201px;
            width: 418px;
            margin-top: 20px;
        }
        .header_list_home_content .header_list_home_content_right_in{
            width:391px;
            padding-left: 18px;
            border-left:1px solid rgba(0,0,0,0.22);
            text-align: left;
        }
        #nav_log{
            background-position: 0 0;
        }
        #nav_album{
            background-position: -52px 0;
        }
        #nav_say{
            background-position: -104px 0;
        }
        #nav_share{
            background-position: -156px 0;
        }
        #nav_video{
            background-position: -260px 0;
        }
        #nav_music{
            background-position: -312px 0;
        }
        #nav_messageBoard{
            background-position: -364px 0;
        }
       #nav_personalDoc{
            background-position: -416px 0;
        }
        #nav_collection{
            background-position: -468px 0;
        }
        .header_list_home_content_right_in>.content:nth-child(n+6){
            margin-top: 20px;
        }
        .header_list_home_content_right_in .content .app_icon{
            margin: 0 12.5px;
        }
        .header_list_home_content_right_in .content .app_name{
            width: 75px;
        }

        .header_list .header_list_friend_content{
            position: absolute;
            display: none;
            background:#FEFDFD;
            border: 1px solid rgba(0,0,0,0.16);
            border-top: 0;
            font-size: 12px;
            line-height: 16px;
        }
        .header_list:hover .header_list_friend_content{
            display: block;
            width: 550px;
            height: 312px;
            transition: opacity 0.5s ease-in-out;
        }
        .header_list_friend_content a{
            color:#000000;
        }
        .header_list_friend_content .header_list_friend_content_left{
            float:left;
            width: 100px;
            margin-top: 30px;
        }
        .header_list_friend_content_left .content{
            width: 50px;
            margin-left: 24px;
        }
        .header_list_friend_content_left .content a{
            display: block;
        }
        .header_list_friend_content_left .content .app_icon{
            width:48px;
            height:48px;
            border: #e2e2e2 1px solid;
            border-radius: 3px
        }
        #nav_intimacy{
            background-position: -379px -18px;
            margin: 16px auto;
        }
        .header_list_friend_content_left .content .app_name{
            width: 50px;
            margin-top: 8px;
            text-align: center;
        }
        .header_list_friend_content .header_list_friend_content_right{
            float:left;
            margin-top: 30px;
            border-left:1px solid rgba(0,0,0,0.22);
            padding-left:30px ;
        }
        .header_list_friend_content_right .header_list_friend_content_right_top{
            display: block;
            line-height: 24px;
            width: 356px;
            height:37px;
            text-align: left;
        }
        .header_list_friend_content_right .header_list_friend_content_right_center{
            width: 417px;
            height:190px;
            text-align: left;
        }
        .nav_relate{
            background-position: -579px 0;
        }
        .header_list_friend_content_right_center .content{
            display: inline-block;
            margin-right: 25px;
        }
        .header_list_friend_content_right_center .content>a{
            display: block;
        }
        .header_list_friend_content_right_center .content .app_icon{
        }
        .header_list_friend_content_right_center .content .app_icon img{
            width: 70px;
            height:70px;
        }
        .header_list_friend_content_right_center .content .app_name{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 16px;
        }
        .header_list_friend_content_right_center .content .app_name img{
            width:16px;
            height:16px;
        }
        .header_list_friend_content_right .header_list_friend_content_right_bottom{
            display: block;
            width: 356px;
            height:20px;
            line-height: 25px;
            text-align: left;
            color: rgba(0,0,0,0.46);
        }

        .header_list .header_list_game_content{
            position: absolute;
            display: none;
            background:#FEFDFD;
            border: 1px solid rgba(0,0,0,0.16);
            border-top: 0;
            font-size: 12px;
            line-height: 16px;
        }
        .header_list:hover .header_list_game_content{
            display: block;
            width:530px;
            height:347px;
            transition: opacity 0.5s ease-in-out;
        }
        .header_list_game_content .content .app_icon{
            width:50px;
            height:50px;
            border:1px solid rgba(0,0,0,0.16);
        }
        .header_list_game_content .content a{
            color:#000000;
        }
        .header_list_game_content .content>a{
            display: block;
        }
        .header_list_game_content .header_list_game_content_left{
            float: left;
            width: 100px;
            margin-top: 30px;
        }
        #findGame{
            background-position: -236px -98px;
            margin: 12px auto;
        }
        .header_list_game_content_left .content{
            display: block;
            margin-left: 24px;
        }
        .header_list_game_content_left .content .app_icon{
            width: 48px;
            height: 48px;
            border: #e2e2e2 1px solid;
        }
        .header_list_game_content_left .content .app_name{
            width: 50px;
            height: 16px;
            margin-top: 8px;
        }
        .header_list_game_content .header_list_game_content_right{
            float: left;
            width: 420px;
            padding-left: 9px;
            margin-top: 30px;
            border-left:1px solid rgba(0,0,0,0.22);
            text-align: left;
        }
        .header_list_game_content_right .content{
            display: inline-block;
        }
        .header_list_game_content_right .content:nth-child(n+6){
            margin-top: 20px;
        }
        .header_list_game_content_right .content .app_icon{
            width: 50px;
            height:50px;
            margin: 0 14px;
            border: 0;
        }
        .header_list_game_content_right .content .app_icon img{
            width: 50px;
            height: 50px;
        }
        .header_list_game_content_right .content .app_name{
            width: 80px;
            height: 16px;
            margin-top: 8px;
            text-align: center;
        }

        .header_list .header_list_adornment_content{
            position: absolute;
            display: none;
            background:#FEFDFD;
            border: 1px solid rgba(0,0,0,0.16);
            border-top: 0;
            background-size: contain;
        }
        .header_list:hover .header_list_adornment_content{
            display: block;
            width: 548px;
            height:300px;
            transition: opacity 0.5s ease-in-out;
            font-size: 12px;
            line-height: 16px;
            background-color: #fafafa;
        }
        .header_list_adornment_content a{
            color:#000000;
        }
        .header_list_adornment_content .header_list_adornment_content_left{
            float: left;
            width: 105px;
            margin-top: 30px;
        }
        .header_list_adornment_content_left .content{
            display: block;
            margin-left: 28px;
        }
        .header_list_adornment_content_left .content>a{
            display: block;
        }
        .header_list_adornment_content_left .content .app_icon{
            width: 48px;
            height: 48px;
            border: #e2e2e2 1px solid;
            border-radius: 3px;
        }
        #adornment{
            background-position: -546px 0;
            margin: 12px auto;
        }
        #store{
            background-position: -546px -26px;
            margin: 12px auto;
        }
        .header_list_adornment_content_left .content .app_name{
            width: 50px;
            margin: 8px 0 18px;
            text-align: center;
        }
        .header_list_adornment_content .header_list_adornment_content_right{
            float: left;
            border-left:1px solid rgba(0,0,0,0.22) ;
            padding-left: 30px;
            margin-top: 30px;
        }
        .header_list_adornment_content .header_list_adornment_content_right_top{
            width: 409px;
            text-align: left;
        }
        .header_list_adornment_content_right_top li{
            display: inline-block;
        }
        .header_list_adornment_content_right_top li a{
            font-size:12px ;
            line-height: 18px;
        }
        .header_list_adornment_content_right_top li .split{
            border-left: 1px solid rgba(0,0,0,0.22) ;
            margin: 0 12px;
        }
        .header_list_adornment_content_right_top li:hover a{
            text-decoration: underline;
        }
        .header_list_adornment_content .header_list_adornment_content_right_center{
            text-align: left;
            width: 410px;
            margin-top:5px ;
            margin-left: -5px;
        }
        .header_list_adornment_content_right_center .content{
            display: inline-block;
            border: 6px solid #f1f1f1;
            margin: 3px 8px 8px 3px;
        }
        .header_list_adornment_content_right_center .content .app_icon{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 142px;
            height: 92px;
        }
        .header_list_adornment_content_right_center .content .app_icon img{
            width: 142px;
            height: 92px;
        }

        .header_right{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height:41px;
            font-size: 10px;
        }
        .header_right .user_home{
            display: flex;
            height:41px;
            padding: 0 5px;
        }
        .user_home:hover{
            background-color: #bfab86;
        }
        .user_home .img{
            display: inline-block;
            height: 41px;
        }
        .user_home .img img{
            padding-top: 9px;
            padding-right: 8px;
            width:24px;
            height: 24px;
        }
        .user_home .name{
            display: inline-block;
            width: 50px;
            height: 41px;
            line-height: 41px;
            text-align: center;
            color: white;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding:0 10px;
            box-sizing: border-box;
        }
        .header_right .exit{
            display: flex;
            height:41px;
            align-items: center;
            padding-left:20px;
            padding-right: 20px;
        }
        .header_right .exit a{
            color: white;
        }
        .header_right .exit:hover{
            background-color: #bfab86;
        }

        main {
            display: flex;
            flex-wrap: wrap;
        }
        main .nav{
            padding-top: 110px;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .nav .nav_menu {
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            width: 1046px;
        }
        .nav_menu .nav_menu_img{
            position: relative;
            width: 120px;
            height:120px;
            background-color: white;
            border: 3px solid #f1f1f1;
            margin-bottom: 25px;
        }
        .nav_menu .nav_menu_img .nav_menu_img_txt{
            position: absolute;
            display: none;
            width: 120px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 12px;
            background-color: black;
            margin-top: -31px;
        }
        .nav_menu .nav_menu_img .nav_menu_img_txt>a{
            color: white;
        }
        .nav_menu .nav_menu_img:hover .nav_menu_img_txt{
            display: block;
            position: relative;
        }
        .nav_menu .nav_menu_img .nav_menu_img_txt .nav_menu_img_txt_down{
            display: none;
            position: absolute;
            border: 1px solid rgb(220, 220, 220);
            border-top: 0;
        }
        .nav_menu .nav_menu_img .nav_menu_img_txt:hover .nav_menu_img_txt_down{
            display:block;
        }
        .nav_menu .nav_menu_img .nav_menu_img_txt .nav_menu_img_txt_down_box{
            width: 118px;
            height:30px;
            color: rgb(51, 51, 51);
            font-size: 12px;
            line-height: 30px;
            background-color: white;
        }
        .nav_menu .nav_menu_img .nav_menu_img_txt .nav_menu_img_txt_down_box:hover{
            background-color: #f5f5f5;

        }
        .nav_menu_img span{
            position: absolute;
            font-size: 20px;
            font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
            color:#8c8262;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            top:60px;
            left:145px;
        }
        .nav_menu_img img{
            width:120px;
            height:120px;
        }
        .nav_menu .nav_menu_text{
            width: 700px;
            margin-left: 20px;
        }
        .nav_menu_text li {
            display: inline-block;
            padding-left: 15px;
            padding-right: 15px;
            line-height: 47px;
            font-size: 14px;
            color: rgb(64, 62, 59);
        }
        .nav_menu_text li:hover{
            text-decoration: underline;
        }
        .main_contain{
            display: flex;
            width: 1040px;
            padding-top: 20px;
            margin:0 auto;
        }
        .main_contain .main_left{
            width: 168px;
        }
        .main_left .main_left_top{
            width: 168px;
            border:1px solid rgb(212, 206, 190);
            background-color: #f8f6f2;
            padding-top: 2px;
            padding-bottom: 2px;
        }
        .main_left_top .content{
            padding: 8px 3px;
            margin-bottom: 1px;
        }
        .main_left_top .content:last-child{
            margin-bottom: 0;
        }
        .main_left_top .content:hover{
            background-color: rgb(230, 225, 211);
        }
        .main_left_top .content:first-child{
            background-color: rgb(230, 225, 211);
        }
        .main_left_top .content a{
            display: flex;
        }

        .content .content_left{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 16px;
            height: 16px;
            padding-left: 14px;
            margin-right: 10px;
        }
        #friendDynamic{
            background-position: -120px -522px;
        }
        #specialConcern{
            background-position: -84px -36px;
        }
        #relateToMe{
            background-position: -84px -342px;
        }
        #spaceExpert{
            background-position: -138px -54px;
        }
        #thatYearToday{
            background-position: -102px -648px;
        }
        #penguinTutoring{
            background-position: -138px -126px;
        }
        #gameApplications{
            background-position: -120px -738px;
        }
        #myCollection{
            background-position: -120px -846px;
        }
        .content .content_right{
            line-height: 16px;
            font-size: 12px;
            width: 122px;
        }
        .main_contain .main_center{
            padding-left: 23px;
        }
        .main_center .main_center_top{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            width: 592px;
        }

        .main_center_top .main_center_top_textarea{
            display: flex;
            justify-content: space-between;
            background-color: #f8f6f2;
        }
        .main_center_top_textarea .textArea{
            display: none;
            width: 427px;
            height:60px;
            padding: 3px 8px 5px;
            line-height: 20px;
            font-weight: 500;
            font-size: 14px;
            border: 1px solid rgb(212, 206, 190);
            border-right: 1px solid #ffffff;
            background-color: white;
            resize: none;
            overflow-y: auto;
            outline: none;
        }
        .main_center_top_textarea .textArea_placeHolder{
            width: 427px;
            height:60px;
            color: rgb(153, 149, 141);
            padding: 3px 8px 5px;
            line-height: 20px;
            font-weight: 500;
            font-size: 14px;
            border: 1px solid rgb(212, 206, 190);
            border-right: 1px solid #ffffff;
            background-color: white;
        }
        .main_center_top_textarea .textArea::-webkit-scrollbar{
            width: 6px;
        }
        .main_center_top_textarea .textArea::-webkit-scrollbar-thumb{
            background-color: rgba(0,0,0,0.13);
            border-radius: 10px;
        }
        .main_center_top_textarea .textArea::-webkit-scrollbar-thumb:hover{
            background-color: rgba(0,0,0,0.25);
        }
        .main_center_top_textarea .img .img_box{
            float: left;
            border: 1px solid rgb(212, 206, 190);
            border-left: 0;
        }
        .main_center_top_textarea .img .img_box:first-child{
            background-color: #ffffff;
         }
        .main_center_top_textarea .img .img_box .img_box_nav{/*设置导航栏的盒子*/
            display: flex;
            width: 48px;
            height: 68px;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .main_center_top_textarea .img .img_box .img_box_down_left{/*设置导航栏左下拉的盒子*/
            display: none;
            position: absolute;
            /*background-color: #f8f6f2;*/
        }
        .main_center_top_textarea .img .img_box .img_box_down{
            float: left;
            position: relative;
            width: 48px;
            height: 68px;
            border: 1px solid rgb(212, 206, 190);
            border-top: 0;
            text-align: center;
            background-color: #fff;
            top:1px;
            z-index: 500;
        }
        #local{
            background-position: -32px -468px;
        }
        #album{
            background-position: -32px -572px;
        }
        #music{
            background-position: -32px -104px;
        }
        #video{
            background-position: -32px -156px;
        }
        .main_center_top_textarea .img .img_box .img_box_down:hover #local{
            background-position: -32px -494px;
        }
        .main_center_top_textarea .img .img_box .img_box_down:hover #album{
            background-position: -32px -598px;
        }
        .main_center_top_textarea .img .img_box .img_box_down:hover #music{
            background-position: -32px -130px;
        }
        .main_center_top_textarea .img .img_box .img_box_down:hover #video{
            background-position: -32px -182px;
        }
        .main_center_top_textarea .img .img_box .img_box_down i{
            display: block;
            margin: auto;
            margin-top: 13px;
            margin-bottom: 3px;
        }
        .main_center_top_textarea .img .img_box .img_box_down .txt{
            width: 48px;
            line-height: 16px;
            font-size: 12px;
        }
        .main_center_top_textarea .img .img_box .img_box_down_left .img_box_down{
            position: relative;
            left: -1px;
            margin-right:-1px;
        }
        .main_center_top_textarea .img .img_box .img_box_down_right{
            display: none;
            position: absolute;
        }
        .main_center_top_textarea .img .img_box .img_box_down_right .img_box_down{
            position: relative;
            left: -50px;
            margin-right:-1px;
        }

        .main_center_top_textarea .img .img_box:hover{
            background-color: #fff;
        }
        #camera{
            background-position: 0 -832px;
        }
        .main_center_top_textarea .img .img_box:hover #camera{
            background-position: -26px -832px;
        }
        #paperClip{
            background-position: -32px 0;
        }
        .main_center_top_textarea .img .img_box:hover #paperClip{
            background-position: -32px -26px;
        }
        .main_center_top_textarea .img .img_box:hover .img_box_down_left{
            display: block;
        }
        .main_center_top_textarea .img .img_box:hover .img_box_down_right{
            display: block;
        }

        .main_center_top .main_center_top_down{
            display:none;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            /*#f8f6f2*/
            border: 1px solid rgb(212, 206, 190);
            border-top: 0;
            width: 590px;
            height:38px;
        }
        .main_center_top_down .main_center_top_down_left{
            float:left;
            margin-left: 15px;
            padding-top:12px ;
        }
        .main_center_top_down_left a{
            height:16px;
            margin-right: 6px;
        }
        #insertExpression{
            background-position: -84px 0;
        }
        .main_center_top_down_left a:hover #insertExpression{
            background-position: -84px -324px;
        }
        #mentionFriend{
            background-position: -84px -342px;
        }
        .main_center_top_down_left a:hover #mentionFriend{
            background-position: -84px -360px;
        }
        #insertTopic{
            background-position: -84px -378px;
        }
        .main_center_top_down_left a:hover #insertTopic{
            background-position: -84px -396px;
        }
        .main_center_top_down .main_center_top_down_right{
            float: right;
            height: 38px;
        }
        .main_center_top_down_right .left{
            display: inline-block;
            font-size: 12px;
            color:rgb(153, 149, 141);
        }
        .main_center_top_down_right .left>a{
            height:16px;
            vertical-align: middle;
        }
        #synchronizationSign{
            background-position: -102px -198px;
        }
        .main_center_top_down_right .left a:hover #synchronizationSign{
            background-position: -102px -216px;
        }
        .img_right{
            vertical-align: middle;
            height:10px;
        }
        #smallDown{
            background-position: -84px -306px;
        }
        .main_center_top_down_right .left .nav_option{
            display: inline-block;
            height:16px;
            position: relative;
        }
        .main_center_top_down_right .left .nav_option .split{
            display: inline-block;
            margin: 0 15px 0 8px;
            height: 16px;
            border-left: 1px solid rgb(224, 219, 209);
            vertical-align:middle;
        }
        .main_center_top_down_right .left .nav_option .label{
            display: inline-block;
            vertical-align: middle;
            line-height: 16px;
        }
        .main_center_top_down_right .left .nav_option .option{
            display: inline-block;
            width: 85px;
            vertical-align:middle;
            text-align: center;
            /*margin-right: 5px;*/
            line-height: 16px;
            color:rgb(153, 149, 141);
        }

        .main_center_top_down_right .left .nav_option .set-audience-drop{
            position: absolute;
            display: none;
            left: 54px;
            top: 28px;
            background-color: rgb(248, 246, 242);
            border: 1px solid rgb(224, 219, 209);
            z-index: 500;
        }
        .main_center_top_down_right .left .nav_option:hover{
            height: 26px;
        }
        .main_center_top_down_right .left .nav_option:hover .set-audience-drop{
            display: block;
        }
        .set-audience-drop .arrow{
            position: absolute;
            left: 64px;
            top:-7px;
        }
        .set-audience-drop .arrow b{
            display: block;
            width: 0;
            height: 0;
            line-height: 0;
            border-left: 6px solid transparent;
            border-right:6px solid transparent;
        }
        .set-audience-drop .arrow .in_bor{
            position: absolute;
            border-bottom: 6px solid rgb(230, 225, 211);
        }
        .set-audience-drop .arrow .out_bor{
            position: absolute;
            top: 1px;
            border-bottom: 6px solid #f8f6f2;
        }
        .set-audience-drop .list{
            padding: 3px;
        }
        .list .bg_hover{
            width: 134px;
            margin-bottom:1px ;
        }
        .list .bg_hover:last-child{
            margin-bottom: 0;
        }
        .bg_hover .evt_click{
            display: flex;
            align-items: center;
            width: 110px;
            padding: 5px 12px 5px 12px;
        }
        .bg_hover .evt_click:hover{
            background-color: rgb(230, 225, 211);
        }
        .evt_click .icon-txt{
            display: inline-block;
            font-size: 12px;
            line-height: 16px;
            height: 16px;
        }
        .evt_click i{
            margin-right: 10px;
        }
        #author_all{
            background-position: -84px -594px;
        }
        .evt_click:hover #author_all{
            background-position: -84px -612px;
        }
        #author_qq{
            background-position: -84px -630px;
        }
        .evt_click:hover #author_qq{
            background-position: -84px -648px;
        }
        #author_part{
            background-position: -84px -666px;
        }
        .evt_click:hover #author_part{
            background-position: -84px -684px;
        }
        #author_part_forbidden{
            background-position: -84px -702px;
        }
        .evt_click:hover #author_part_forbidden{
            background-position: -84px -720px;
        }
        #author-self{
            background-position: -84px -738px;
        }
        .evt_click:hover #author-self{
            background-position: -84px -756px;
        }
        .main_center_top_down_right .right{
            display: inline-block;
            padding-top: 5px;
            margin: 0 10px;
        }
        .main_center_top_down_right .right .txt{
            width: 55px;
            line-height: 28px;
            font-size: 14px;
            color:#fff;
            text-align: center;
            background-color: rgb(179, 165, 125);
            border-radius: 2px;
        }

        .main_center_top_imgBox{
            display: none;
            width: 592px;
            border:1px solid rgb(212, 206, 190);
            border-top: 0;
            background-color: #f8f6f2;
            padding: 14px 10px 0 10px;
            box-sizing: border-box;
            z-index: 200;
        }
        .main_center_top_imgBox .box_tit{
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 10px;
        }
        .main_center_top_imgBox .box_tit::after{
            content: "";
            display: table;
            clear: both;
        }
        #smallAlbum{
            background-position: -84px -450px;
        }
        #closeAll{
            background-position: -84px -558px;
        }
        .main_center_top_imgBox .box_tit #closeAll:hover{
            background-position: -84px -576px;
        }
        .main_center_top_imgBox .box_tit .box_tit_left{
            float:left;
            display: flex;
            align-items: center;
        }
        .main_center_top_imgBox .box_tit .box_tit_left i{
            margin-right: 8px;
        }
        .main_center_top_imgBox .box_tit .box_tit_right{
            float: right;
            display: flex;
            align-items: center;
        }
        .main_center_top_imgBox .box_tit .box_tit_right .del_labels{
            width: 16px;
            height: 16px;
        }
        .main_center_top_imgBox .img_preview{
        }
        .main_center_top_imgBox .img_preview .img_item_list{
            display: flex;
            width: 570px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .main_center_top_imgBox .img_preview .img_item_list .img_item{
            position: relative;
            margin: 1px;
            background-color: black;
        }
        .main_center_top_imgBox .img_preview .img_item_list .img_item .img{
            display: flex;
            justify-content: center;
            overflow: hidden;
            cursor: move;
            width: 279px;
            height: 279px;
            white-space: nowrap;
        }
        .main_center_top_imgBox .img_preview .img_item_list .img_item .img img{
            width: auto;
            height: auto;
        }
        .main_center_top_imgBox .img_preview .img_item_list .img_item .icon_img_remove{
            position: absolute;
            top:0;
            right: 0;
            width: 24px;
            height:24px;
            background-color: black;
        }
         .closeImg{
            background-position: -200px -56px;
        }

        .main_center .main_center_middle{
            height: 44px;
            margin-top: 12px;
            margin-bottom:12px ;
            background-color: #f8f6f2;
            border:1px solid rgb(212, 206, 190);
        }
        .main_center_middle .content_left{
            float:left;
            position: relative;
            width: 100px;
            text-align: center;
            line-height: 44px;
        }
         .content_left .content_left_text{
             font-size: 13px;
             line-height: 17px;
             font-weight: 700;
        }
        #_smallDown{
            display: inline-block;
            margin-left: 4px;
            margin-top: 3px;
            background-position: -84px -306px;
        }
        .content_left:hover .content_left_down{
            display: block;
        }
        .main_center_middle  .content_left_down{
            position: absolute;
            display: none;
            padding: 8px 0;
            background-color: #ffffff;
            border: 1px solid rgb(224, 219, 209);
        }
        .content_left_down li{
            line-height: 32px;
        }
        .content_left_down .txt {
            width: 68px;
            height: 32px;
            padding: 0 20px;
            font-size: 14px;
            text-align: left;
            line-height: 32px;
        }
        .content_left_down .txt:hover{
            background-color: rgb(230, 225, 211);
        }
        .main_center_middle .content_right{
            float:right;
            padding-top: 10px;
            padding-right: 11px;
        }
        .main_center_middle .content_right a{
            height:24px;
        }
        .main_center_middle .content_right i{
            display: inline-block;
            width:24px;
            height:24px;
        }
        #dynamicFlash{
            background-position: -58px -676px;
        }
        .main_center_middle .content_right #dynamicFlash:hover{
            background-position: -58px -702px;
        }
        #dynamicSet{
            background-position: -58px -728px;
        }
        .main_center_middle .content_right #dynamicSet:hover{
            background-position: -58px -754px;
        }

        .main_center_bottom .main_center_bottom_content {
            width: 590px;
            background-color: #f8f6f2;
            padding-top: 16px;
            margin-bottom: 20px;
            border: 1px solid rgb(212, 206, 190);
        }

        .main_center_bottom_content .publisher {
            width: 560px;
            height: 50px;
            padding: 0 16px;
            margin-bottom: 12px;
        }

        .main_center_bottom_content .publisher .publisher_img {
            float: left;
            width: 50px;
            height: 50px;
            margin-right: 12px;
        }

        .main_center_bottom_content .publisher .publisher_img img {
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }

        .main_center_bottom_content .publisher .publisher_info {
            float: left;
            width: 473px;
        }

        .main_center_bottom_content .publisher .publisher_info .publish_name {
            display: block;
            width: 473px;
            font-size: 16px;
            line-height: 21px;
            margin-bottom: 5px;
            color: rgb(64, 62, 59);
        }

        .main_center_bottom_content .publisher .publisher_info .publish_name a:hover {
            text-decoration: underline;
        }

        .main_center_bottom_content .publisher .publisher_info .publish_time {
            width: 473px;
            font-size: 13px;
            line-height: 17px;
            color: rgb(153, 149, 141);
        }

        .main_center_bottom_content .publisher .user_operator {
            float: right;
            width: 24px;
            height: 30px;
            position: relative;
            top: -5px;
            right: -3px;
            z-index: 1;
        }

        .main_center_bottom_content .publisher .user_operator:hover .operator_down {
            display: block;
        }

        .bigDown {
            background-position: -32px -728px;
        }
        .main_center_bottom_content .publisher .user_operator:hover .bigDown{
            background-position: -32px -754px;
        }

        .main_center_bottom_content .publisher .user_operator .operator_down {
            display: none;
            position: absolute;
            left: -126px;
        }

         .user_operator .operator_down .arrow {
            position: absolute;
            left: 130px;
            top: -5px;
        }

         .user_operator .operator_down .arrow b {
            display: block;
            width: 0;
            height: 0;
            line-height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
        }

         .user_operator .operator_down .arrow .in_bor {
            position: absolute;
            border-bottom: 6px solid rgb(212, 206, 190);
        }

         .user_operator .operator_down .arrow .out_bor {
            position: absolute;
            top: 1px;
            border-bottom: 6px solid #f8f6f2;
        }

         .user_operator .operator_down .operator_down_list {
            background-color: #f8f6f2;
            border: 1px solid rgb(212, 206, 190);
            padding: 8px 0;
        }

        .user_operator .operator_down .operator_down_list .item {
            display: flex;
            width: 126px;
            height: 36px;
            padding: 0 15px;
            font-size: 13px;
            align-items: center;
        }
        .user_operator .operator_down .operator_down_list .item .placeTop{
            background-position: -58px -156px;
        }
        .user_operator .operator_down .operator_down_list .item:hover .placeTop{
            background-position: -58px -416px;
        }
        .user_operator .operator_down .operator_down_list .item .delete{
            background-position: -58px -312px;
        }
        .user_operator .operator_down .operator_down_list .item:hover .delete{
            background-position: -58px -468px;
        }
        .user_operator .operator_down .operator_down_list .item .collection{
            background-position: -58px -182px;
        }
        .user_operator .operator_down .operator_down_list .item:hover .collection{
            background-position: -58px -338px;
        }
        .user_operator .operator_down .operator_down_list .item .hidden{
            background-position: -58px -208px;
        }
        .user_operator .operator_down .operator_down_list .item:hover .hidden{
            background-position: -58px -364px;
        }
        .user_operator .operator_down .operator_down_list .item .report{
            background-position: -58px -234px;
        }
        .user_operator .operator_down .operator_down_list .item:hover .report{
            background-position: -58px -390px;
        }

         .user_operator .operator_down .operator_down_list .item:hover {
            background-color: #e6e1d3;
        }

         .user_operator .operator_down .operator_down_list .item img {
            float: left;
            margin-right: 8px;
        }

         .user_operator .operator_down .operator_down_list .item .item_txt {
            float: left;
        }

        .main_center_bottom_content .publish_content {
            width: 592px;
        }

        .main_center_bottom_content .publish_content .txt {
            padding: 0 16px;
            margin-bottom: 8px;
            color: rgb(64, 62, 59);
            font-size: 16px;
            line-height: 21px;
            overflow-wrap: break-word;
        }

        .main_center_bottom_content .publish_content .txt_img {
            padding: 0 16px;
            width: 560px;
        }
        .main_center_bottom_content .publish_content .txt_img .img_item{
            display: inline-block;
            height: auto;
            max-width: 560px;
            max-height: 384px;
            overflow: hidden;
            background-color: black;
            margin-bottom: 10px;
        }
        .main_center_bottom_content .publish_content .txt_img .img_item img{
            width: 100%;
            height: 100%;
        }

        .main_center_bottom_content .evaluate {
            width: 592px;
            padding-bottom: 16px;
        }

        .main_center_bottom_content .evaluate .evaluate_top {
            width: 560px;
            margin: 0 16px 10px 16px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0dbd1;
        }

        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_left {
            float: left;
            color: rgb(153, 149, 141);
            font-size: 13px;
            line-height: 17px;
            margin-top: 3px;
        }

        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right {
            float: right;
        }

        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .evaluate_top_right_box {
            float: right;
            margin-left: 55px;
            width: 24px;
            height: 24px;
        }

        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .share {
            background-position: -52px -832px;
        }
        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .share:hover {
            background-position: -58px 0;
        }
        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .comment {
            background-position: -32px -780px;
        }
        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .comment:hover {
            background-position: -32px -806px;
        }
        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .like {
            background-position: -58px -26px;
        }
        .main_center_bottom_content .evaluate .evaluate_top .evaluate_top_right .like:hover{
            background-position: -58px -52px;
        }

        .main_center_bottom_content .evaluate .evaluate_center {
            /*width: 560px;*/
            /*padding: 2px 16px 0 16px;*/
            /*margin-bottom: 8px;*/
            /*margin-top: -4px;*/
            font-size: 14px;
        }
        .evaluate_center .evaluate_center_item{
            position: relative;
            width: 508px;
            padding: 9px 16px 10px 68px;
        }
        .evaluate_center .evaluate_center_item .evaluate_center_item_left{
            position: absolute;
            left: 16px;
            top:9px;
        }
        .evaluate_center_item_left .img{
        }
        .evaluate_center_item_left .img img{
            width: 40px;
            height: 40px;
            border: 1px solid rgb(221, 221, 221);
            border-radius: 100%;
        }
        .evaluate_center .evaluate_center_item .evaluate_center_item_right{
            font-size: 14px;
            line-height: 21px;
            text-align: left;
            overflow-wrap: break-word;
        }
        .evaluate_center_item_right .user_name{
            color: rgb(140, 130, 98);
        }
        .evaluate_center_item_right .user_name:hover{
            text-decoration: underline;
        }
        .evaluate_center_item_right .evaluate_img{
            width: 508px;
            margin: 5px 0 3px;
        }
        .evaluate_img_item{
            display: inline-block;
            margin-right: 4px;
        }
        .evaluate_img_item a{
            display: flex;
            justify-content: center;
            width: 80px;
            height:80px;
            overflow: hidden;
            background-color: black;
        }
        .evaluate_img_item img{
            height: 100%;
            width: auto;
        }
        .evaluate_center_item_right .evaluate_time{
            display: flex;
            margin-top: 2px;
            color: rgb(153, 149, 141);
            align-items: center;
        }
        .evaluate_center_item_right .evaluate_time span{
            margin-right: 10px;
        }
        .evaluate_center_item_right .evaluate_time a{
            display: none;
            height: 18px;
            margin-right: 10px;
        }
         .followReview{
            background-position: -102px -846px;
        }
        .deleteReview{
            background-position: -102px -864px;
        }
        .evaluate_center_item_right .evaluate_time:hover a{
            display: inline-block;
        }

        .main_center_bottom_content .evaluate .evaluate_bottom {
            width: 592px;
            padding: 0 16px;
            box-sizing: border-box;
        }

        .main_center_bottom_content .evaluate .evaluate_bottom .comment_box {
            border: 1px solid rgb(224, 219, 209);
        }

        .main_center_bottom_content .evaluate .evaluate_bottom .comment_box .comment_box_input {
            position: relative;
            width: 558px;
            cursor: text;
            padding: 2px 0 2px 0;
            background-color: #f8f6f2;
        }

        .comment_box_input .comment_box_input_left {
            /*display:none;*/
            float: left;
        }

        .comment_box_input_left .comment_input_textArea {
            display: none;
            width: 485px;
            height: 60px;
            resize: none;
            padding: 3px 8px 5px 8px;
            outline: none;
            border: 0;
            color: rgb(64, 62, 59);
            font-size: 13px;
            line-height: 20px;
        }
        .comment_box_input_left .comment_input_text{
            padding-left: 10px;
            font-size: 13px;
            line-height: 30px;
            color: rgb(153, 149, 141);
        }
        .comment_box_input_left .comment_input_down{
            display: none;
            width: 558px;
            height: 149px;
            padding:14px 10px 0 10px;
            box-sizing: border-box;
        }
        .comment_input_down .comment_img_item{
            display: inline-block;
            position: relative;
            background-color: black;
            margin-bottom: 10px;
            margin-right: 19px;
        }
        .comment_img_item .icon_img_remove{
            position: absolute;
            top:0;
            right: 0;
        }
        .comment_img_item .icon_img_remove img{
            width: 24px;
            height: 24px;
            background-color: black;
        }
        .comment_img_item .img{
            display: flex;
            justify-content: center;
            width: 150px;
            height:112px;
            overflow: hidden;
        }
        .comment_img_item .img img{
            width: auto;
            height: 100%;
        }
        .comment_box_input_left .comment_input_textArea::-webkit-scrollbar {
            width: 6px;
        }
        .comment_box_input_left .comment_input_textArea::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.13);
            border-radius: 10px;
        }
        .comment_box_input_left .comment_input_textArea::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.25);
        }

        .comment_box_input .comment_box_input_right {
            position: absolute;
            width: 24px;
            height: 30px;
            bottom: 0;
            right: 0;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
            z-index: 2;
        }

        .comment_box_input .comment_box_input_right:hover .input_down {
            display: block;
        }

        .comment_box_input .comment_box_input_right .camera {
            background-position: -58px -520px;
            margin-top: 3px;
        }

        .comment_box_input .comment_box_input_right .input_down {
            display: none;
            position: absolute;
            left: -80px;
            margin-top: 1px;
        }

        .comment_box_input .comment_box_input_right .input_down .input_arrow {
            position: absolute;
            left: 93px;
            top: -8px;
        }

        .comment_box_input .comment_box_input_right .input_down .input_arrow b {
            display: block;
            width: 0;
            height: 0;
            line-height: 0;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .input_down .input_arrow .input_in_bor {
            position: absolute;
            border-bottom: 9px solid rgb(212, 206, 190);
        }

        .input_down .input_arrow .input_out_bor {
            position: absolute;
            top: 1px;
            border-bottom: 9px solid #f8f6f2;
        }

        .evaluate_bottom .comment_box_input_right .input_down .input_down_list {
            background-color: #f8f6f2;
            border: 1px solid rgb(212, 206, 190);
            padding: 8px 0;
        }

        .input_down .input_down_list .input_item {
            display: flex;
            position: relative;
            width: 120px;
            height: 36px;
            font-size: 13px;
            padding-left: 20px;
            align-items: center;
            box-sizing: border-box;
        }

        .input_down .input_down_list .input_item:hover {
            background-color: #e6e1d3;
        }

        .input_down .input_down_list .input_item i{
            float: left;
            margin-right: 8px;
        }
        .input_down .input_down_list .input_item .item_location{
            background-position: -84px -810px;
        }
        .input_down .input_down_list .input_item:hover .item_location{
            background-position: -84px -828px;
        }
        .input_down .input_down_list .input_item .item_album{
            background-position: -84px -846px;
        }
        .input_down .input_down_list .input_item:hover .item_album{
            background-position: -84px -864px;
        }

        .input_down .input_down_list .input_item .input_item_txt {
            float: left;
        }

        .evaluate_bottom .comment_box_down {
            display: none;
            width: 560px;
            height: 38px;
            line-height: 17px;
            padding-top: 7px;
            box-sizing: border-box;
            z-index: 500;
        }

        .evaluate_bottom .comment_box_down_left {
            float: left;
            margin-top: 4px;
        }
        .evaluate_bottom .comment_box_down_left a {
            margin-right: 10px;
        }
        .evaluate_bottom .comment_box_down_left .insertExpr{
            background-position: -58px -624px;
        }
        .evaluate_bottom .comment_box_down_left .insertExpr:hover{
            background-position: -58px -650px;
        }
        .evaluate_bottom .comment_box_down_left .mentionFriend{
            background-position: -58px -572px;
        }
        .evaluate_bottom .comment_box_down_left .mentionFriend:hover{
            background-position: -58px -598px;
        }
        .evaluate_bottom .comment_box_down_right {
            float: right;
            width: 78px;
            height: 28px;
            background-color: rgb(179, 165, 125);
            border-radius: 2px;
        }

        .evaluate_bottom .comment_box_down_right .button_txt {
            text-align: center;
            color: white;
            font-size: 14px;
            line-height: 28px;
        }

        .main_contain .main_right{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            padding-left: 23px;
        }
        .main_right .main_right_top{
            position: relative;
            height: 68px;
            background-color: rgb(212, 206, 190);
        }
        .main_right_top .main_right_top_content_left{
            float: left;
            width: 66px;
            height: 68px;
            padding: 0 6px;
            text-align: center;
            color: #8c8262;
            background-color: rgb(212, 206, 190);
        }
        .main_right_top_content_left .ck_date{
            width: 66px;
            height:16px;
            padding: 16px 0 1px;
            font-size: 12px;
            line-height: 16px;
        }
        .main_right_top_content_left .ck_title{
            font-size: 18px;
            line-height: 24px;
        }
        .main_right_top .main_right_top_content_right{
            padding-left: 100px;
            width: 128px;
            height: 66px;
            color:#8c8262;
            background-color: #f8f6f2;
            border: 1px solid rgb(212, 206, 190);
        }
        .main_right_top_content_right .ck_count_word{
            font-size: 12px;
            line-height: 16px;
            padding: 16px 0 1px;
        }
        .main_right_top_content_right .ck_count_num{
            width: 58px;
            font-size: 18px;
            line-height: 23px;
        }
        .main_right .main_right_bottom{
            width: 219px;
            padding-left: 9px;
            margin-top: 12px;
            background-color: #f8f6f2;
            border:1px solid rgb(212, 206, 190);
        }
        .main_right_bottom .main_right_bottom_nav{
            padding: 13px 0 10px;
            font-size: 12px;
            line-height: 16px;
        }
        .main_right_bottom_nav a:hover{
            text-decoration: underline;
        }
        .main_center_bottom_nav a{
            color:rgb(140, 130, 98);
        }
        .main_right_bottom_nav b{
            margin: 0 5px;
            color: rgb(224, 219, 209);
        }
        .main_right_bottom_nav a.title{
            color:black;
        }
        .main_right_bottom .main_right_bottom_main{
            text-align: center;
            font-size: 12px;
            line-height: 16px;
        }
        .main_right_bottom .main_right_bottom_man_page{
        }
        .main_right_bottom .main_right_bottom_footer{
            display: flex;
            justify-content: space-between;
            width: 202px;
            height:36px;
            font-size: 12px;
            line-height: 16px;
            text-align: center;
            padding: 15px 4px 4px;
            margin: 10px 9px 0 0;
            border-top: 1px solid rgb(224, 219, 209);
        }
        .main_right_bottom_footer li{
        }
        footer {
            background-color: #f1f1f1;
            margin-top: 10px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="background"></div>
<div class="background_repeat"></div>
<header>
    <div class="nav_bottom_fix">
        <div class="nav_top_fix">
            <div class="header_left">
                <div class="logo">
                    <a href="/Index" title="LinkMate">
                        <img src="/logoRes/logo.png" alt="LinkMate">
                    </a>
                </div>
                <ul class="header_left_content">
                    <li>
                        <div class="header_list">
                            <a href="#">
                                个人中心
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="header_list">
                            <a href="#">我的主页</a>
                            <div class="header_list_home_content">
                                <ul class="header_list_home_content_left">
                                    <li class="content">
                                        <a href="/Index" class="app_icon">
                                            <i id="index" class="nav_img size24"></i>
                                        </a>
                                        <a href="#" class="app_name">主页</a>
                                    </li>
                                </ul>
                                <div class="header_list_home_content_right">
                                    <ul class="header_list_home_content_right_in">
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_log" class="nav_img size50"></i>
                                                <a href="#" class="app_name">日志</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_album" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">相册</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_say" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">说说</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_share" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">分享</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_video" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">视频</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#"  class="app_icon">
                                                <i id="nav_music" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">音乐</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_messageBoard" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">留言板</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_personalDoc" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">个人档</a>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <i id="nav_collection" class="nav_img size50"></i>
                                                <a href="#"  class="app_name">收藏</a>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="header_list">
                            <a href="#">好友</a>
                            <div class="header_list_friend_content">
                                <ul class="header_list_friend_content_left">
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <i id="nav_intimacy" class="_nav_detail_img size16"></i>
                                        </a>
                                        <a href="#" class="app_name">亲密度</a>
                                    </li>
                                </ul>
                                <div class="header_list_friend_content_right">
                                    <a href="#" class="header_list_friend_content_right_top">最近联络的好友</a>
                                    <ul class="header_list_friend_content_right_center">
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img src="#" alt="" title="你最近看过的好友">
                                            </a>
                                            <a href="#" class="app_name">
                                                <i class="nav_relate nav_detail_img size13"></i>
                                                <span>41</span>
                                            </a>
                                        </li>
                                    </ul>
                                    <a href="javascript:void(0)" class="header_list_friend_content_right_bottom">最近添加的好友</a>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="header_list">
                            <a href="javascript:void(0)">
                                游戏
                            </a>
                            <div class="header_list_game_content">
                                <ul class="header_list_game_content_left">
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <i id="findGame" class="_nav_img size24"></i>
                                        </a>
                                        <a href="#" class="app_name">找游戏</a>
                                    </li>
                                </ul>
                                <ul class="header_list_game_content_right">
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                                <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏1</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                                <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏2</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                                <img src="#" alt="">
                                            </a>
                                            <a href="#" class="app_name">游戏3</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏4</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏5</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏6</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏7</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏8</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏9</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                            <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">游戏10</a>
                                    </li>
                                    <li class="content">
                                        <a href="#" class="app_icon">
                                                <img src="#" alt="">
                                        </a>
                                        <a href="#" class="app_name">更多游戏应用</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="header_list">
                            <a href="#">
                                装扮
                            </a>
                            <div class="header_list_adornment_content" th:style="'background: url(\''+${Web}+'/Index/img?name=adornmentBG\');'">
                                <ul class="header_list_adornment_content_left">
                                    <li class="content">
                                        <a href="javascript:void(0)" class="app_icon">
                                            <i id="adornment" class="nav_img size24"></i>
                                        </a>
                                        <a href="javascript:void(0)" class="app_name">一键装扮</a>
                                    </li>
                                    <li class="content">
                                        <a href="javascript:void(0)" class="app_icon">
                                            <i id="store" class="nav_img size24"></i>
                                        </a>
                                        <a href="javascript:void(0)" class="app_name">装扮商城</a>
                                    </li>
                                </ul>
                                <div class="header_list_adornment_content_right">
                                    <ul class="header_list_adornment_content_right_top" id="adornment_nav">
                                        <li sign="1">
                                            <a href="javascript:void(0)" >路过心灵的句子</a>
                                        </li>
                                        <li>
                                            <span class="split"></span>
                                        </li>
                                        <li sign="2">
                                            <a href="javascript:void(0)" >心已飞远</a>
                                        </li>
                                        <li>
                                            <span class="split"></span>
                                        </li>
                                        <li sign="3">
                                            <a href="javascript:void(0)">新潮流</a>
                                        </li>
                                        <li>
                                            <span class="split"></span>
                                        </li>
                                        <li sign="4">
                                            <a href="javascript:void(0)">极速传说</a>
                                        </li>
                                    </ul>
                                    <ul class="header_list_adornment_content_right_center" id="adornment_content">
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img th:src="${basePath}+'/img?name=adornment&&page=1&&pict=1'" alt="">
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img th:src="${basePath}+'/img?name=adornment&&page=1&&pict=2'" alt="">
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img th:src="${basePath}+'/img?name=adornment&&page=1&&pict=3'" alt="">
                                            </a>
                                        </li>
                                        <li class="content">
                                            <a href="#" class="app_icon">
                                                <img th:src="${basePath}+'/img?name=adornment&&page=1&&pict=4'" alt="">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <script>
                /*<![CDATA[*/
                var requestAddress=/*[[${Web}]]*/ '';
                /*]]>*/
                (function(nav,content){
                    /*<![CDATA[*/
                    var basePath = /*[[${basePath}]]*/ '#';
                    /*]]>*/
                    // var randomNum = Math.floor(Math.random() * 4) + 1;
                    var lis = $id_elements(nav,'li');
                    var img=$id_elements(content,'img');
                    for (var i = 0; i < lis.length; i++) {
                        if(i%2===0) {
                            lis[i].addEventListener('mouseover', function () {//鼠标悬浮
                                for(var j=0; j<img.length; j++) {
                                    var address = basePath + this.getAttribute("sign") + "/adornment" + (j + 1) + ".gif";
                                    img[j].setAttribute("src", address);
                                }
                            });
                        }
                    }
                })('adornment_nav','adornment_content');
            </script>
            <div class="header_right">
                <a class="user_home" href="#">
                    <div class="img">
                        <img th:src="${basePath}+'/img?name=get_head_img'" alt="">
                    </div>
                    <div class="name" th:utext="${username}"></div>
                </a>
                <div class="exit">
                    <a href="/Index/exit">退出</a>
                </div>
            </div>
        </div>
    </div>
</header>
<main>
    <div class="nav">
        <div class="nav_menu">
            <div class="nav_menu_img">
                <a href="javascript:void(0)">
                    <img th:src="${basePath}+'/img?name=get_head_img'" alt="">
                </a>
                <div class="nav_menu_img_txt">
                    <a href="javascript:void(0)">修改头像</a>
                    <ul class="nav_menu_img_txt_down">
                        <li class="nav_menu_img_txt_down_box">
                            <a href="javascript:void(0)">选择相册</a>
                        </li>
                        <li class="nav_menu_img_txt_down_box">
                            <a href="javascript:void(0)">本地上传</a>
                        </li>
                    </ul>
                </div>
                <span th:utext="${username}"></span>
            </div>
            <ul class="nav_menu_text">
                <li><a href="#">主页</a></li>
                <li><a href="#">日志</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">说说</a></li>
                <li><a href="#">个人档</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">更多</a></li>
            </ul>
        </div>
    </div>

    <div class="main_contain">
        <div class="main_left">
            <ul class="main_left_top">
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="friendDynamic" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>好友动态</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="specialConcern" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>特别关心</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="relateToMe" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>与我相关</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="spaceExpert" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>空间达人</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="thatYearToday" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>那年今日</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="penguinTutoring" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>企鹅辅导</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="gameApplications" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>游戏应用</span>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a href="#">
                        <div class="content_left">
                            <i id="myCollection" class="com_img size16"></i>
                        </div>
                        <div class="content_right">
                            <span>我的收藏</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        <div class="main_center">
            <div class="main_center_top" onclick="showDown(event)">
                <div class="main_center_top_textarea">
                    <textarea class="textArea"></textarea>
                    <div class="textArea_placeHolder">说点儿什么吧</div>
                    <div class="img">
                        <div class="img_box">
                            <a class="img_box_nav" ></a>
                        </div>
                        <div class="img_box">
                            <a href="javascript:void(0)" class="img_box_nav">
                                <i id="camera" class="com_img size24"></i>
                            </a>
                            <div class="img_box_down_left">
                                <a href="javascript:void(0)" class="img_box_down">
                                    <i id="local" class="com_img size24"></i>
                                    <div class="txt">本地</div>
                                    <input accept="image/*" type="file" style="position: absolute;width:48px;height:68px;left:0;top:0;opacity: 0;cursor:pointer" id="fileInput">
                                </a>
                                <a href="javascript:void(0)" class="img_box_down">
                                    <i id="album" class="com_img size24"></i>
                                    <div class="txt">相册</div>
                                </a>
                            </div>
                        </div>
                        <div class="img_box">
                            <a href="javascript:void(0)" class="img_box_nav">
                                <i id="paperClip" class="com_img size24"></i>
                            </a>
                            <div class="img_box_down_right">
                                <a href="javascript:void(0)" class="img_box_down">
                                    <i id="music" class="com_img size24"></i>
                                    <div class="txt">音乐</div>
                                </a>
                                <a href="javascript:void(0)" class="img_box_down">
                                    <i id="video" class="com_img size24"></i>
                                    <div class="txt">视频</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main_center_top_down">
                    <div class="main_center_top_down_left">
                        <a href="javascript:void(0)" title="插入表情">
                            <i id="insertExpression" class="com_img size16"></i>
                        </a>
                        <a href="javascript:void(0)" title="提到好友">
                            <i id="mentionFriend" class="com_img size16"></i>
                        </a>
                        <a href="javascript:void(0)" title="插入话题">
                            <i id="insertTopic" class="com_img size16"></i>
                        </a>
                    </div>
                    <div class="main_center_top_down_right">
                        <div class="left">
                            <a href="javascript:void(0)" title="同步至QQ签名">
                                <i id="synchronizationSign" class="com_img size16"></i>
                            </a>
                            <div class="nav_option">
                                <div class="split"></div>
                                <div class="label">可见范围:</div>
                                <a href="javascript:void(0)">
                                    <div class="option">所有人可见</div>
                                </a>
                                <a href="javascript:void(0)" class="img_right">
                                    <i id="smallDown" class="com_img size10"></i>
                                </a>

                                <div class="set-audience-drop">
                                    <div class="arrow">
                                        <b class="in_bor"></b>
                                        <b class="out_bor"></b>
                                    </div>
                                    <ul class="list">
                                        <li class="bg_hover" >
                                            <a href="javascript:void(0)" class="evt_click">
                                                <i id="author_all" class="com_img size16"></i>
                                                <div class="icon-txt ">所有人可见</div>
                                            </a>
                                        </li>
                                        <li class="bg_hover" >
                                            <a href="javascript:void(0)" class="evt_click">
                                                <i id="author_qq" class="com_img size16"></i>
                                                <div class="icon-txt">QQ好友可见</div>
                                            </a>
                                        </li>
                                        <li class="bg_hover" >
                                            <a href="javascript:void(0)" class="evt_click">
                                                <i id="author_part" class="com_img size16"></i>
                                                <div class="icon-txt">部分好友可见</div>
                                            </a>
                                        </li>
                                        <li class="bg_hover">
                                            <a href="javascript:void(0);" class="evt_click">
                                                <i id="author_part_forbidden" class="com_img size16"></i>
                                                <div class="icon-txt">部分好友不可见</div>
                                            </a>
                                        </li>
                                        <li class="bg_hover" >
                                            <a href="javascript:void(0)" class="evt_click" >
                                                <i id="author-self" class="com_img size16"></i>
                                                <div class="icon-txt">仅自己可见</div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <a href="javascript:void(0)" onclick="sendDynamic(event)" class="btn-post">
                                <div class="txt">发表</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="main_center_top_imgBox" id="imageBox">
                    <div class="box_tit">
                        <div class="box_tit_left">
                            <i id="smallAlbum"  class="com_img size16"></i>
                            <span class="img_num">图片&nbsp;(0/9)</span>
                        </div>
                        <div class="box_tit_right">
                            <a class="del_labels" href="javascript:void(0)" onclick="removeAllImg(event)" id="delete_all_img">
                                <i id="closeAll"  class="com_img size16"></i>
                            </a>
                        </div>
                    </div>
                    <div class="img_preview" draggable="true" style="-webkit-user-drag: element; user-select: none;">
                        <ul class="img_item_list">
                        </ul>
                    </div>
                </div>
            </div>
            <script>
                var files=[];
                let event_over = false;//鼠标悬浮事件
                function showDown(event){
                    var target=event.target;
                    if(target.className==="textArea_placeHolder"){
                        var main_center_top=target.parentNode.parentNode;
                        var textArea=main_center_top.querySelector('.textArea');
                        let down=main_center_top.querySelector('.main_center_top_down');
                        textArea.style.display="block";
                        textArea.focus();
                        target.style.display="none";
                        down.style.display="block";
                        down.style.display="block";
                    }
                    var down=document.querySelector('.main_center_top_down');
                    down.style.display="block";
                }
                document.querySelector('.main_center_top').addEventListener('mouseover',function () {
                    event_over=true;
                });
                document.querySelector('.main_center_top').addEventListener('mouseout',function () {
                    event_over=false;
                });
                window.addEventListener('click',function (){
                    if(!event_over){
                        var down=document.querySelector('.main_center_top_down');
                        down.style.display = "none";
                        var textArea=document.querySelector('.textArea');
                        if(!textArea.value||isAllSpaces(textArea.value)){
                            textArea.style.display="none";
                            textArea.value="";
                            document.querySelector('.textArea_placeHolder').style.display="block";
                        }
                    }
                });

                document.getElementById('fileInput').addEventListener('change', function(event)
                {
                    const file = event.target.files[0]; // 获取选中的文件
                    files.push(file);
                    event.target.value="";
                    const reader = new FileReader(); // 创建一个FileReader对象

                    reader.onloadend = function()
                    {// 当文件读取完成后，将图片显示在下面
                        const imgBox = document.getElementById('imageBox');
                        imgBox.style.display="block";
                        const list = imgBox.querySelector(".img_item_list");
                        const htmlToInsert = `
<li class="img_item">
    <a class="icon_img_remove" href="javascript:void(0)" title="删除图片" onclick="removeImg(event)">
        <i class="detail_img closeImg size24"></i>
    </a>
    <div class="img">
        <img src="${reader.result}" height="279" alt="">
    </div>
</li>`;
                        list.insertAdjacentHTML('beforeend', htmlToInsert);
                        var title=imgBox.querySelector(".img_num");
                        var num=Number(title.innerText.match(/\d/))+1;
                        title.innerText ="图片 ("+num+"/9)";
                        const imgs=imgBox.querySelectorAll(".img");
                        if(num===1||num%2===0&&num!==6&&num!==8)//1,2,4
                        {
                            for (let i = 0; i < imgs.length; i++) {
                                imgs[i].style.width = "279px";
                                imgs[i].style.height = "279px";
                            }
                        }
                        else//3,5,6,7,8,9
                        {
                            for (let i = 0; i < imgs.length; i++) {
                                imgs[i].style.width = "185px";
                                imgs[i].style.height = "185px";
                            }
                        }
                    }
                    reader.readAsDataURL(file);// 读取文件作为DataURL（Base64编码）
                });

                function removeImg(event)
                {
                    var currentNode=event.target.parentNode;
                    var liNode=currentNode.parentNode;
                    var imgBox=liNode.parentNode.parentNode.parentNode;
                    var title=imgBox.querySelector(".img_num");

                    var ul=imgBox.querySelector(".img_item_list");
                    var index = Array.from(ul.children).indexOf(currentNode.parentElement);
                    files.splice(index,1);

                    var num=Number(title.innerText.match(/\d/))-1;
                    title.innerText ="图片 ("+num+"/9)";
                    const imgs = imgBox.querySelectorAll(".img");
                    liNode.remove();
                    if(num===1||num%2===0&&num!==6&&num!==8)
                    {
                        for (let i = 0; i < imgs.length; i++) {
                            imgs[i].style.width = "279px";
                            imgs[i].style.height = "279px";
                        }
                    }
                    else
                    {
                        for (let i = 0; i < imgs.length; i++) {
                            imgs[i].style.width = "185px";
                            imgs[i].style.height = "185px";
                        }
                    }
                    if(num===0)
                        imgBox.style.display="none";
                }

                function removeAllImg(event) {
                    const imgBox = event.target.parentNode.parentNode.parentNode.parentNode;
                    const img_item_list = imgBox.querySelector(".img_item_list");
                    files.length=0;
                    img_item_list.innerHTML = "";
                    const title = imgBox.querySelector(".img_num");
                    title.innerText = "图片 (0/9)";
                    const imgs = imgBox.querySelectorAll(".img");
                    for (let i = 0; i < imgs.length; i++) {
                        imgs[i].style.width = "279px";
                        imgs[i].style.height = "279px";
                    }
                    imgBox.style.display="none";
                }
            </script>

            <div class="main_center_middle">
                <div class="content_left">
                    <a class="content_left_text" href="javascript:void(0)">
                        <span>全部动态</span>
                        <i id="_smallDown" class="com_img size10"></i>
                    </a>
                    <ul class="content_left_down">
                        <li>
                            <a href="javascript:void(0)">
                                <div class="txt">全部动态</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <div class="txt">相册</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <div class="txt">日志</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="content_right">
                    <a href="javascript:void(0)" onclick="flashDynamic(event)">
                        <i id="dynamicFlash" class="com_img size24"></i>
                    </a>
                    <a href="javascript:void(0)" style="margin-left: 16px">
                        <i id="dynamicSet" class="com_img size24"></i>
                    </a>
                </div>
            </div>

            <ul class="main_center_bottom">
            </ul>
            <script th:inline="javascript">
                var commentFiles=[];
                function flashDynamic(event){
                    var main_center=event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
                    var main_center_bottom=main_center.querySelector(".main_center_bottom");
                    while (main_center_bottom.childElementCount!==0){
                        main_center_bottom.removeChild(main_center_bottom.firstChild);
                    }
                    requestDynamic();
                }
                function dynamicTemplate(dynamicID,userImg,username,publish_t,theme,content,objects)
                {
                    var did=dynamicID.split("_");
                    var doperator;
                    /*<![CDATA[*/
                    var self = /*[[${email}]]*/'Guest';
                    /*]]>*/
                    //判断这个动态是自己的,还是别人的
                    if(did[0]===self)//自己的动态
                    {
                        doperator=`
<a href="javascript:void(0)" class="item">
    <i class="placeTop com_img size24"></i>
    <div class="item_txt">置顶</div>
</a>
<a href="javascript:void(0)" class="item" onclick="deleteDynamic(event)">
    <i class="delete _com_img size24"></i>
    <div class="item_txt">删除</div>
</a>`;
                    }
                    else//别人的动态
                    {
                        doperator= `
<a href="javascript:void(0)" class="item">
    <i class="collection com_img size24"></i>
    <div class="item_txt">收藏</div>
</a>
<a href="javascript:void(0)" class="item">
    <i class="hidden com_img size24"></i>
    <div class="item_txt">隐藏此动态</div>
</a>
<a href="javascript:void(0)" class="item">
    <i class="report com_img size24"></i>
    <div class="item_txt">举报</div>
</a>`;
                    }

                    var imgElements="";
                    for(let i in content)
                    {
                        imgElements=imgElements+`
<li class="img_item">
    <a href="${content[i]}" target="_blank">
        <img src="${content[i]}" alt="">
    </a>
</li>`;
                    }
                    var evaluations="";
                    for(let i in objects)
                    {
                        var object=[];
                        for(let j in objects[i])
                        {
                            object.push(objects[i][j]);
                        }
                        var eimgElements="";
                        for(let k in object[5])
                        {
                            eimgElements=eimgElements+`
<li class="evaluate_img_item">
    <a href="${object[5][k]}">
        <img src="${object[5][k]}" alt="">
    </a>
</li>`;
                        }
                        var ehtmlToInsert=`
<li class="evaluate_center_item" id="${object[0]}">
    <div class="evaluate_center_item_left">
        <a href="" target="_blank" class="img">
            <img src="${object[1]}" alt="">
        </a>
    </div>
    <div class="evaluate_center_item_right">
        <a href="" class="user_name">
            ${object[2]}
        </a>
        &nbsp; : ${object[4]}
        <ul class="evaluate_img">
            ${eimgElements}
        </ul>
        <div class="evaluate_time">
            <span>
                ${convertMillisecondsToDate(object[3])}
            </span>
            <a href="javascript:void(0)">
                <i class="followReview com_img size18"></i>
            </a>
            <a href="javascript:void(0)" onclick="deleteEval(event)">
                <i class="deleteReview com_img size18"></i>
            </a>
        </div>
    </div>
</li>`;
                        evaluations=evaluations+ehtmlToInsert;
                    }

                    var htmlToInsert=`
<li class="main_center_bottom_content" id="${dynamicID}">
    <div class="publisher">
        <a href="#" class="publisher_img">
            <img src="${userImg}" alt="">
        </a>
        <div class="publisher_info">
            <div class="publish_name">
                <a href="#">
                    ${username}
                </a>
            </div>
            <div class="publish_time">
                    ${publish_t}
            </div>
        </div>
        <div class="user_operator">
            <i class="bigDown com_img size24"></i>
            <div class="operator_down">
                <div class="arrow">
                    <b class="in_bor"></b>
                    <b class="out_bor"></b>
                </div>
                <div class="operator_down_list">
                    ${doperator}
                </div>
            </div>
        </div>
    </div>
    <div class="publish_content">
        <div class="txt">
            ${theme}
        </div>
        <ul class="txt_img">
            ${imgElements}
        </ul>
    </div>
    <div class="evaluate">
        <div class="evaluate_top">
            <a href="javascript:void(0)" class="evaluate_top_left">浏览0次</a>
            <div class="evaluate_top_right">
                <a href="javascript:void(0)" class="evaluate_top_right_box">
                    <i class="share com_img size24"></i>
                </a>
                <a href="javascript:void(0)" class="evaluate_top_right_box" onclick="focusComment(event)">
                    <i class="comment com_img size24"></i>
                </a>
                <a href="javascript:void(0)" class="evaluate_top_right_box">
                    <i class="like com_img size24"></i>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
        <ul class="evaluate_center">
            ${evaluations}
        </ul>
        <div class="evaluate_bottom">
            <div class="comment_box" onclick="replace_to_textArea(event)">
                <div class="comment_box_input">
                    <div class="comment_box_input_left">
                        <textarea class="comment_input_textArea"></textarea>
                        <a class="comment_input_text">评论</a>
                        <ul class="comment_input_down">
                        </ul>
                    </div>
                    <div href="javascript:void(0)" class="comment_box_input_right">
                        <i class="camera com_img size24"></i>
                        <div class="input_down">
                            <div class="input_arrow">
                                <b class="input_in_bor"></b>
                                <b class="input_out_bor"></b>
                            </div>
                            <div class="input_down_list">
                                <a href="javascript:void(0)" class="input_item">
                                    <i class="item_location com_img size16"></i>
                                    <div class="input_item_txt">本地</div>
                                    <input accept="image/*" type="file" style="position: absolute;width:120px;height:36px;left:0;opacity: 0;" onchange="commentFileInput(event)">
                                </a>
                                <a href="javascript:void(0)" class="input_item">
                                    <i class="item_album com_img size16"></i>
                                    <div class="input_item_txt">相册</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="comment_box_down">
                <div class="comment_box_down_left">
                    <a href="javascript:void(0)">
                        <i class="insertExpr com_img size24"></i>
                    </a>
                    <a href="javascript:void(0)">
                        <i class="mentionFriend com_img size24"></i>
                    </a>
                </div>
                <a href="javascript:void(0)" class="comment_box_down_right" onclick="sendEval(event)">
                    <div class="button_txt">发表</div>
                </a>
            </div>
        </div>
    </div>
</li>`;
                    var parentElement=document.querySelector('.main_center_bottom');
                    parentElement.insertAdjacentHTML('afterbegin', htmlToInsert);
                }

                function focusComment(event){
                    var evaluateNode=event.target.parentNode.parentNode.parentNode.parentNode;
                    var comment_box_input=evaluateNode.querySelector('.comment_box_input');
                    comment_box_input.click();
                }

                function convertMillisecondsToDate(milliseconds)
                {
                    var date = new Date(Number(milliseconds));
                    const currentMillis = new Date().getTime();

                    var month = String(date.getMonth() + 1).padStart(2, '0');
                    var day = String(date.getDate()).padStart(2, '0');
                    var hours = String(date.getHours()).padStart(2, '0');
                    var minutes = String(date.getMinutes()).padStart(2, '0');

                    // 比较毫秒数差是否大于1年
                    const oneYearInMillis = 365 * 24 * 60 * 60 * 1000; // 一年的毫秒数
                    const oneDayInMillis=24 * 60 * 60 * 1000;//一天的毫秒数
                    const twoDayInMillis=2*oneDayInMillis;//两天的毫秒数
                    const threeDayInMillis=3*oneDayInMillis//三天的毫秒数
                    var time=Math.abs(currentMillis - milliseconds);
                    if (time > oneYearInMillis) {//时间相差超过1年
                        var year = date.getFullYear();
                        return year+"年 "+month+"月"+day+"日 "+hours+":"+minutes;
                    }
                    else
                    {//时间相差小于等于1年
                        if(time < oneDayInMillis)
                        {
                            return hours+":"+minutes;
                        }
                        else if(time>=oneDayInMillis&&time<twoDayInMillis){
                            return "昨天 "+hours+":"+minutes;
                        }
                        else if(time>=twoDayInMillis&&time<=threeDayInMillis){
                            return "前天 "+hours+":"+minutes;
                        }
                        else{
                            return month+"月"+day+"日 "+hours+":"+minutes;
                        }
                    }
                    // var seconds = String(date.getSeconds()).padStart(2, '0');
                }

                function replace_to_textArea(event)
                {
                    var target=event.target;
                    if(target.className==="comment_box_input")
                    {
                        var evaluateBottomNode=target.parentNode.parentNode;

                        var input=evaluateBottomNode.querySelector('.comment_box_input');
                        var textArea=evaluateBottomNode.querySelector('.comment_input_textArea');
                        var text=evaluateBottomNode.querySelector('.comment_input_text');
                        var down=evaluateBottomNode.querySelector('.comment_box_down');
                        var comment_input_down=evaluateBottomNode.querySelector('.comment_input_down');

                        input.style.backgroundColor="#ffffff";//背景颜色设置为白色
                        textArea.style.display="block";//显示文本域
                        textArea.focus();//并且文本域聚焦
                        text.style.display="none";//隐藏文本
                        down.style.display="block";//显示下面
                        window.addEventListener('click',function (event)
                        {
                            var target=event.target.parentNode;
                            if (target.contains( evaluateBottomNode))
                            {
                                if((!textArea.value||isAllSpaces(textArea.value))&&comment_input_down.childElementCount===0)
                                {
                                    input.style.backgroundColor="";
                                    textArea.value="";
                                    textArea.style.display="none";
                                    text.style.display="block";
                                    down.style.display="none";
                                }
                            }
                        });
                    }
                }

                function commentFileInput(event)
                {
                    var comment_box_input=event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
                    var evaluate_bottom=comment_box_input.parentNode.parentNode;

                    var input=evaluate_bottom.querySelector('.comment_box_input');
                    var textArea=evaluate_bottom.querySelector('.comment_input_textArea');
                    var text=evaluate_bottom.querySelector('.comment_input_text');
                    var down=evaluate_bottom.querySelector('.comment_box_down');

                    const file=event.target.files[0];
                    commentFiles.push(file);
                    event.target.value="";
                    const reader = new FileReader(); // 创建一个FileReader对象
                    //设置读取的回调函数
                    reader.onloadend = function() {// 当文件读取成功时执行 ,当文件读取完成后，将图片显示在下面
                        const comment_input_down = comment_box_input.querySelector('.comment_input_down');
                        comment_input_down.style.display="block";
                        if(comment_input_down.childElementCount+1<=3)
                        {
                            if(comment_input_down.childElementCount===0){
                                input.style.backgroundColor="#ffffff";//背景颜色设置为白色
                                textArea.style.display="block";//显示文本域
                                textArea.focus();//并且文本域聚焦
                                text.style.display="none";//隐藏文本
                                down.style.display="block";//显示下面
                            }
                            const htmlToInsert = `
<li class="comment_img_item">
    <a class="icon_img_remove" href="javascript:void(0)" title="删除图片" onclick="removeCommentImg(event)">
        <i class="detail_img closeImg size24"></i>
    </a>
    <div class="img">
        <img src="${reader.result }" height="123px" alt="">
    </div>
</li>`;
                            comment_input_down.insertAdjacentHTML('beforeend', htmlToInsert);
                        }
                    }
                    //设置读取失败的回调函数
                    reader.onerror = function() {// 当文件读取失败时执行
                        console.error('文件读取失败:', reader.error);// 处理错误情况
                    };
                    // 开始读取文件
                    reader.readAsDataURL(file);// 读取文件作为DataURL（Base64编码）
                }

                function  removeCommentImg(event)
                {
                    var comment_img_item=event.target.parentNode.parentNode;
                    var comment_input_down=comment_img_item.parentNode;
                    var evaluate_bottom=comment_input_down.parentNode.parentNode.parentNode.parentNode;
                    var textArea=evaluate_bottom.querySelector('.comment_input_textArea');

                    var index = Array.from(comment_img_item.parentElement.children).indexOf(comment_img_item);
                    files.splice(index,1);

                    comment_img_item.remove();
                    if(comment_input_down.childElementCount===0)
                    {
                        comment_input_down.style.display="none";
                        textArea.focus();
                    }
                }

                function evaluationTemplate(Node,commentID,userImg,username,evaluate_t,content,imgurl)
                {
                    var imgElements="";
                    for(let i in imgurl)
                    {
                        imgElements=imgElements+`
<li class="evaluate_img_item">
    <a href="${imgurl[i]}">
        <img src="${imgurl[i]}" alt="">
    </a>
</li>`;
                    }
                    var htmlToInsert=`
<li class="evaluate_center_item" id="${commentID}">
    <div class="evaluate_center_item_left">
        <a href="" target="_blank" class="img">
            <img src="${userImg}" alt="">
        </a>
    </div>
    <div class="evaluate_center_item_right">
        <a href="" class="user_name">${username}</a>
        &nbsp;: ${content}
        <ul class="evaluate_img">
            ${imgElements}
        </ul>
        <div class="evaluate_time">
            <span>${evaluate_t}</span>
            <a href="javascript:void(0)">
                <i class="followReview com_img size18"></i>
            </a>
            <a href="javascript:void(0)" onclick="deleteEval(event)">
                <i class="deleteReview com_img size18"></i>
            </a>
        </div>
    </div>
</li>`;
                    Node.insertAdjacentHTML('beforeend', htmlToInsert);
                }

                function requestNewComment(Node,did,cid)
                {
                    fetch(`${requestAddress}/Index/getNewComment?t=${Date.now()}&&did=${did}&&cid=${cid}`,{
                        method:'POST'
                    }).then(response=>{
                        return response.json();
                    }).then(object=>{
                        let arrkey = [];
                        for(let i in object){
                            arrkey.push(object[i]);
                        }
                        evaluationTemplate(Node,arrkey[0],arrkey[1],arrkey[2],convertMillisecondsToDate(arrkey[3]),arrkey[4],arrkey[5])
                    });
                }

                function isAllSpaces(str) {
                    return /^[\s]*$/.test(str);
                }

                function  deleteEval(event){
                    var evaluate_center_item=event.target.parentNode.parentNode.parentNode.parentNode;
                    var main_center_bottom_content=evaluate_center_item.parentNode.parentNode.parentNode;
                    var did=main_center_bottom_content.id;
                    var cid=evaluate_center_item.id;
                    console.log(evaluate_center_item);
                    fetch(`${requestAddress}/Index/deleteComment?t=${Date.now()}&&did=${did}&&cid=${cid}`,{
                        method:'POST',
                    }).then(response=>{
                        if(response.ok){
                            evaluate_center_item.remove();
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }

                function sendEval(event)
                {
                    var evaluateBottomNode =event.target.parentNode.parentNode.parentNode;
                    var evaluateNode=evaluateBottomNode.parentNode;
                    var evaluateCenter=evaluateNode.querySelector(".evaluate_center");

                    var li=evaluateBottomNode.parentNode.parentElement;
                    var input=evaluateBottomNode.querySelector('.comment_box_input');
                    var textArea=evaluateBottomNode.querySelector('.comment_input_textArea');
                    var input_text=evaluateBottomNode.querySelector('.comment_input_text');
                    var down=evaluateBottomNode.querySelector('.comment_input_down');
                    let reqText;
                    let reqImg;
                    async function commentFetchSequentially()
                    {
                        let dynamicID=li.id;
                        let url=`${requestAddress}/Index/sendEvaluate?t=${Date.now()}&&did=${dynamicID}&&content=create`;
                        let commentID;
                        var text=textArea.value;
                        var imgCount=down.childElementCount;
                        if(text&&!isAllSpaces(text)||imgCount>0){
                            await createSpace(url).then(response=>{
                                return response.text();
                            }).then(response=>{
                                commentID=response;
                            });
                        }
                        if(text&&!isAllSpaces(text)){
                            url=`${requestAddress}/Index/sendEvaluate?t=${Date.now()}&&did=${dynamicID}&&content=text&&cid=${commentID}`;
                            reqText=sendText(textArea.value,url);
                        }
                        if(imgCount>0)
                        {
                            url=`${requestAddress}/Index/sendEvaluate?t=${Date.now()}&&did=${dynamicID}&&content=img&&cid=${commentID}`;
                            let formData = new FormData();
                            for (let i = 0; i < commentFiles.length; i++) {
                                formData.append('image'+(i+1), commentFiles[i]);
                            }
                            reqImg=sendImg(formData,url);
                        }

                        if(text&&imgCount>0&&!isAllSpaces(text))
                        {
                            Promise.all([reqText, reqImg])
                                .then(responses => {
                                    textArea.value="";
                                    commentFiles.length=0;
                                    input.style.backgroundColor="";
                                    textArea.style.display="none";
                                    input_text.style.display="block";
                                    down.innerHTML = "";
                                    down.style.display="none";
                                    requestNewComment(evaluateCenter,dynamicID,commentID);
                                }).catch(error => {
                                console.log('Error:', error);
                            });
                        }
                        else if(text&&!isAllSpaces(text))
                        {
                            Promise.all([reqText])
                                .then(responses => {
                                    textArea.value=""
                                    input.style.backgroundColor="";
                                    textArea.style.display="none";
                                    input_text.style.display="block";
                                    requestNewComment(evaluateCenter,dynamicID,commentID);
                                }).catch(error => {
                                console.log('Error:', error);
                            });
                        }
                        else if(imgCount>0)
                        {
                            Promise.all([reqImg])
                                .then(responses => {
                                    commentFiles.length=0;
                                    input.style.backgroundColor="";
                                    textArea.style.display="none";
                                    input_text.style.display="block";
                                    down.innerHTML = "";
                                    down.style.display="none";
                                    requestNewComment(evaluateCenter,dynamicID,commentID);
                                }).catch(error => {
                                console.log('Error:', error);
                            });
                        }
                    }
                    commentFetchSequentially();
                }

                function  requestNewDynamic(did)
                {
                    fetch(`${requestAddress}/Index/getNewDynamic?t=${Date.now()}&&did=${did}`,{
                        method:'POST'
                    }).then(response=>{
                        if(response.ok){
                            return response.json();
                        }
                        else{
                            console.log("网络出现了小问题!!!");
                        }
                    }).then(object=>{
                        let arrkey = [];
                        for (let i in object) {
                            arrkey.push(object[i]);
                        }
                        dynamicTemplate(arrkey[0],arrkey[1],arrkey[2],convertMillisecondsToDate(arrkey[3]),arrkey[4],arrkey[5],arrkey[6]);
                    });
                }

                function  createSpace(url){
                    return new Promise((resolve, reject) => {
                        fetch(url,{
                            method:'POST'
                        }) .then(response => {
                            if (response.ok)
                            {
                                resolve(response);
                            }
                            else
                            {
                                reject(new Error('create failed'));
                            }
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }

                function sendText(text,url){
                    return new Promise((resolve, reject) => {
                        fetch(url,{
                            method:'POST',
                            body:text
                        }) .then(response => {
                            if (response.ok)
                            {
                                resolve(response);
                            }
                            else
                            {
                                reject(new Error('reqText failed'));
                            }
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }

                function sendImg(formData,url) {
                    for (let value of formData.values()) {
                        console.log(value); // 输出
                    }
                    return new Promise((resolve, reject) => {
                        fetch(url,{
                            method:'POST',
                            body:formData
                        }).then(response => {
                            if (response.ok)
                            {
                                resolve(response);
                            }
                            else
                            {
                                reject(new Error('reqImg failed'));
                            }
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }

                function sendDynamic(event)
                {
                    const main_center_top = event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
                    console.log(main_center_top);
                    const textArea = main_center_top.querySelector('.textArea');
                    const textArea_placeHolder=main_center_top.querySelector('.textArea_placeHolder');
                    const down=main_center_top.querySelector('.main_center_top_down');
                    const imgBox = main_center_top.querySelector('.main_center_top_imgBox');
                    const title = imgBox.querySelector(".box_tit_left");
                    const num = Number(title.innerText.match(/\d/));
                    let reqText;
                    let reqImg;

                    async function fetchSequentially()
                    {
                        let url=`${requestAddress}/Index/sendDynamic?t=${Date.now()}&&content=create`;
                        var dynamicID;
                        var text=textArea.value;
                        if(text&&!isAllSpaces(text)||num>0)
                        {
                            await createSpace(url).then(response=>{
                                return response.text();
                            }).then(response=>{
                                dynamicID=response;
                            });
                        }
                        if(text&&!isAllSpaces(text))
                        {
                            url=`${requestAddress}/Index/sendDynamic?t=${Date.now()}&&content=theme&&did=${dynamicID}`;
                            reqText=sendText(textArea.value,url);
                        }
                        if(num>0)
                        {
                            url=`${requestAddress}/Index/sendDynamic?t=${Date.now()}&&content=img&&did=${dynamicID}`;
                            let formData = new FormData();
                            for (let i = 0; i < files.length; i++) {
                                formData.append('image'+(i+1), files[i]);
                            }
                            reqImg=sendImg(formData,url);
                        }

                        if(text&&!isAllSpaces(text)&&num>0)
                        {
                            Promise.all([reqText, reqImg])
                                .then(responses => {
                                    textArea.value="";
                                    textArea.style.display="none";
                                    textArea_placeHolder.style.display="block";
                                    down.style.display="none";
                                    const img_item_list = imgBox.querySelector(".img_item_list");
                                    files.length=0;
                                    img_item_list.innerHTML = "";
                                    const title = imgBox.querySelector(".img_num");
                                    title.innerText = "图片 (0/9)";
                                    const imgs = imgBox.querySelectorAll(".img");
                                    for (let i = 0; i < imgs.length; i++) {
                                        imgs[i].style.width = "279px";
                                        imgs[i].style.height = "279px";
                                    }
                                    imgBox.style.display="none";
                                    requestNewDynamic(dynamicID);
                                }).catch(error => {
                                console.log('Error:', error);
                            });
                        }
                        else if(text&&!isAllSpaces(text))
                        {
                            Promise.all([reqText])
                                .then(responses => {
                                    textArea.value="";
                                    textArea.style.display="none";
                                    textArea_placeHolder.style.display="block";
                                    down.style.display="none";
                                    requestNewDynamic(dynamicID);
                                }).catch(error => {
                                console.log('Error:', error);
                            });
                        }
                        else if(num>0)
                        {
                            Promise.all([reqImg])
                                .then(responses => {
                                    const img_item_list = imgBox.querySelector(".img_item_list");
                                    files.length=0;
                                    img_item_list.innerHTML = "";
                                    const title = imgBox.querySelector(".img_num");
                                    title.innerText = "图片 (0/9)";
                                    const imgs = imgBox.querySelectorAll(".img");
                                    for (let i = 0; i < imgs.length; i++) {
                                        imgs[i].style.width = "279px";
                                        imgs[i].style.height = "279px";
                                    }
                                    imgBox.style.display="none";
                                    requestNewDynamic(dynamicID);
                                }).catch(error => {
                                console.log('Error:', error);
                            });
                        }
                    }
                    fetchSequentially();
                }

                function deleteDynamic(event){
                    var main_center_bottom_content=event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
                    var did=main_center_bottom_content.id;
                    fetch(`${requestAddress}/Index/deleteDynamic?t=${Date.now()}&&did=${did}`,{
                        method:'POST'
                    }).then(response=>{
                        if(response.ok){
                            main_center_bottom_content.remove();
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }

                function requestDynamic()
                {
                    fetch(`${requestAddress}/Index/getDynamics?t=${Date.now()}`,{
                        method:'POST'
                    }).then(response=>{
                        if(response.ok){
                            return response.json();
                        }
                        else{
                            console.log("网络出现了小问题!!!");
                        }
                    }).then(objects=>{
                        for (var i in objects) {
                            var obj = objects[i];
                            var arrkey=[];
                            for (var key in obj) {
                                arrkey.push(key);
                                //console.log(key + ": " + obj[key]);
                            }
                            dynamicTemplate(obj[arrkey[0]],obj[arrkey[1]],obj[arrkey[2]],convertMillisecondsToDate(obj[arrkey[3]]),obj[arrkey[4]],obj[arrkey[5]],obj[arrkey[6]]);
                        }
                    });
                };
                requestDynamic();
            </script>
        </div>
        <div class="main_right">
            <a href="javascript:void(0)">
                <div class="main_right_top">
                    <div class="main_right_top_content_left">
                        <div class="ck_date" id="date"></div>

                        <script>
                            (function (date){
                                var now=new Date();
                                $text_insert(date,now.getMonth()+"."+now.getDate());
                            })('date');
                        </script>

                        <div class="ck_title">签到</div>
                    </div>
                    <div class="main_right_top_content_right">
                        <div class="ck_count_word">每月签到次数</div>
                        <div class="ck_count_num">0次</div>
                    </div>
                </div>
            </a>
            <div class="main_right_bottom">
                <div class="main_right_bottom_nav">
                    <p>
                        <a class="title" href="#">谁看过我</a>
                        <b class="divide-line">|</b>
                        <a href="#" id="visitYou">我看过谁</a>
                        <b class="divide-line">|</b>
                        <a href="#" id="refuseYou">被挡访客</a>
                    </p>
                </div>
                <div class="main_right_bottom_main">
                    <p>您还没有被访问</p>
                </div>
                <div class="main_right_bottom_man_page">
                </div>
                <ul class="main_right_bottom_footer">
                    <li>
                        <p><span>今日浏览</span> </p>
                        <a href="#" title="今天浏览量：0" onclick="" id="visit_today">0</a>
                    </li>
                    <li class="gap">
                        <p><span>总浏览</span> </p>
                        <a href="#" title="总浏览量：0" onclick="" id="visit_total">0</a>
                    </li>
                    <li class="gap " id="today_refuse_visitor">
                        <p><span>被挡访客</span></p>
                        <a href="#" title="被挡访问量：0">0</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</main>

<footer>
    <p>&copy; 2023 LinkMate. All rights reserved.</p>
</footer>

</body>
<script>
    // 定义图片名称数组
    var imgNames = ['background', 'background_repeat'];
    // 函数：获取图片并存储其URL
    async function fetchImages(names) {
        const promises = names.map(name => {
            return fetch(`${requestAddress}/Index/img?name=${name}`, {
                method: 'GET'
            }).then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok.');
                }
                return response.blob();
            }).then(blob => URL.createObjectURL(blob))
                .catch(error => {
                    console.error(`Error fetching image ${name}:`, error);
                    return null; // 或者抛出错误，取决于你的错误处理策略
                });
        });

        // 使用Promise.all并行处理所有请求
        const urls = await Promise.all(promises);
        return urls.filter(url => url !== null); // 过滤掉任何失败的请求结果
    }

    // 函数：设置元素的背景图片
    function setBackgroundImages(urls, names) {
        names.forEach((name, index) => {
            const element = document.querySelector(`.${name}`);
            if (element) {
                element.style.backgroundImage = `url(${urls[index]})`;
            } else {
                console.warn(`No element found with class ${name}`);
            }
        });
    }

    // 调用函数获取图片并设置背景
    fetchImages(imgNames).then(urls => {
        setBackgroundImages(urls, imgNames);
    }).catch(error => {
        console.error('Error fetching images:', error);
    });

    function setBackgroundImageForClass(classNames, imgTypes, imageUrl) {
        // 遍历类名数组
        for (let i = 0; i < classNames.length; i++) { // 使用 length 而不是 size()
            const elements = document.getElementsByClassName(classNames[i]);
            // 遍历元素并设置背景图片
            for (let j = 0; j < elements.length; j++) { // 使用不同的索引 j 避免混淆
                elements[j].style.backgroundImage = `url('${imageUrl}${imgTypes[i]}')`;
            }
        }
    }
    const classNames = [
        'com_img',
        '_com_img',
        'nav_img',
        '_nav_img',
        'nav_detail_img',
        '_nav_detail_img',
        'detail_img'
    ];
    const imgUrl=`${requestAddress}/Index/img?name=`;
    const imgType=[
        'com_collection',
        '_com_collection',
        'nav_collection',
        '_nav_collection',
        'nav_detail_collection',
        '_nav_detail_collection',
        'detail_collection'
    ];
    setBackgroundImageForClass(classNames, imgType,imgUrl);
</script>
</html>
